<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/vue.min.js"></script>
</head>
<body>
    <div id="pageMain">
        <input type="button" value="发起支付（0.01）元" id="pay" style="height: 100px;width:200px;line-height: 100px;border: none">
    </div>
    <script>
        const VM = new Vue({
            el:'#pageMain',
            data:{

            },
            mounted(){},
            methods:{
                getCode:function(){
                    let urls = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=' + encodeURIComponent(URL) + '&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect '
                    $.ajax({
                        type:'get',
                        url:urls,
                        success:function(data){
                            console.log(data)
                            gettokenId(data)
                        },
                        error:function(err){
                            console.log(err)
                        }
                    })
                },
                gettokenId:function(){
                    $.ajax({  
                        url: '/astokenOpid',  
                        dataType: 'json',  
                        type: 'post',  
                        ContentType: "application/json",  
                        data: {  
                            CODES: wxcodes  
                        },  
                        success: function(data) {  
                            localStorage.setItem('userData', JSON.stringify(data));  
                        },  
                    });  
                },
                wxPay:function(){
                    let _this = this
                    $.ajax({
                        url:'/wxpay',
                        dataType:'json',
                        type:'post',
                        ContentType: "application/json", 
                        data: {  
                            CODES: wxcodes,  
                            token: '', // access_token  
                            opid: '', // oppenid  
                            retoken: '', // <span style="font-family:Arial, Helvetica, sans-serif;">refresh_token</span>  
                            scope: '',// scope  
                            expin: '',// expires_in  
                            bodyDetail: '',// 支付详情  
                            bodyTitle: '',// 支付标题  
                            Totla_fees:  1// 支付金额 注：微信支付单位为整形最小值为1   以分为单位  
                        },
                        success:function(){
                            wxdata.appId = data.appId;  
                            wxdata.timeStamp = data.timeStamp;  
                            wxdata.nonceStr = data.nonceStr;  
                            wxdata.package = data.package;  
                            wxdata.signType = data.signType;  
                            wxdata.paySign = data.paySign;  
                            if (typeof WeixinJSBridge == "undefined") {  
                                if (document.addEventListener) {  
                                    document.addEventListener('WeixinJSBridgeReady', _this.onBridgeReady(data.orderNum), false);  
                                } else if (document.attachEvent) {  
                                    document.attachEvent('WeixinJSBridgeReady', _this.onBridgeReady(data.orderNum));  
                                    document.attachEvent('onWeixinJSBridgeReady', _this.onBridgeReady(data.orderNum));  
                                }  
                            } else {
                                 _this.onBridgeReady(data.orderNum); 
                            } 
                        }
                    })
                }
            }
        })

    </script>
</body>
</html>